<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="{:config('admin_static')}/css/style.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript" src="{:config('admin_static')}/js/jquery.js"></script>
    <script language="JavaScript" src="/plugin/jquery.validate.js"></script>
    <style>
        .active{
            border-bottom: solid 3px #66c9f3;
        }
        label.error{
            color:red;
        }
    </style>
</head>

<body>
    <div class="place">
        <span>位置：</span>
        <ul class="placeul">
            <li><a href="#">首页</a></li>
            <li><a href="#">表单</a></li>
        </ul>
    </div>
    <div class="formbody">
        <div class="formtitle">
            <span class="active">基本信息</span>

        </div>
        <form action="" method="post" id='theform'>
            <input type="hidden" name="user_id" value="{$data['user_id']}">
            <ul class="forminfo">
                <li>
                    <label>用户名</label>
                    <input name="username" value="{$data['username']}" placeholder="请输入用户名" type="text" class="dfinput" />
                </li>
                <li>
                    <label>密码：</label>
                    <input name="password" placeholder="留空不做修改" type="password" class="dfinput" /><i></i>
                </li>
                 <li>
                    <label>确认密码：</label>
                    <input name="repassword" placeholder="留空不做修改" type="password" class="dfinput" /><i></i>
                </li>
            </ul>
			<li>
                    <label>&nbsp;</label>
                    <input name="" id="btnSubmit" type="submit" class="btn" value="确认保存" />
             </li>
        </form>
    </div>
</body>
<script>
    $(".formtitle span").click(function(event){
        $(this).addClass('active').siblings("span").removeClass('active') ;
        var index = $(this).index();
        $("ul.forminfo").eq(index).show().siblings(".forminfo").hide();
    });
     $(".formtitle span").eq(0).click();

    //实现密码的编辑
    //1、都为空代表不做密码的修改
    //2、否则两者密码都要修改为一致
    $("#theform").validate({
        //定义规则
        rules:{
            "username":"required",
            "repassword":{
                "checkPass":$("input[name='password']")
            }
        },
        //提示信息
        messages:{
            "username":"用户名必填",
        }
    });
    //自定义验证规则
    $.validator.addMethod('checkPass',function(repassword,ele,param){
        console.log(repassword); //当前验证的元素
        console.log(ele); // 当前验证的元素DOM对象
        console.log(param); // 调用当前验证规则的参数
        var password = param.val();
        if(repassword == '' && password == ''){
            //说明用户想保留原密码
            return true;
        }else{
            //说明其中有一个密码肯定不为空
            if(repassword === password){
                return true;  //密码相等
            }else{
                return false;  //密码不相等
            }
        }
    },'两次密码不一致')
</script>

</html>
